<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>最近点距</title>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>

<body>
<div style="padding:5px;border:1px #ccc solid">
X:<input id="x" type="text" width="100px"/> Y:<input id="y" type="text" width="100px"/> 
<input id="add" type="button" value="添加坐标"/>
</div>

<div style="margin:20px 0px;border:1px #ccc solid;">
    所有点：
	<div id="pointList"></div>
</div>
<input id="jisuan" type="button" value="最近点距计算"/>
<div>
    结果：
	<div id="result" style="color:red"></div>
</div>
<script>
$(function(){
	var ps=[];
	$("#add").click(function(){
		var x=$("#x").val();
		var y=$("#y").val();
		$("#pointList").append("("+x+","+y+")  ");
		var ponit = {"x":x,"y":y};
		ps.push(ponit);
		
		$("#x").val("");
		$("#y").val("")
	});

	$("#jisuan").click(function(){
	    if(ps.length <=1){
			alert("不能少于一个点哦~");
			return;
		}
		console.log(ps);
		$.ajax({
               type: "POST",
			   contentType: 'application/json',
               url: "http://geek-go.cn:8010/api/tools/pointDistance",
               data: JSON.stringify(ps),
               success: function(data){
				  $("#result").html(data.data);
			   }

        });
		ps = [];
		$("#pointList").html("");
	});
})
</script>
</body>
</html>